<template>
<div>
  <el-card :body-style="{ padding: '0px' }">
    <div slot="header">
      <span>菜单管理</span>
      <el-button @click="btnStatus=true;dialogVisible=true;dialogTitle='添加'" type="primary" size="mini" icon="el-icon-plus">添加顶级菜单</el-button>
    </div>
    <el-tree :default-expand-all="true"  v-loading="treeLoading" :data="menusList" :props="{children:'children',label:'text'}">
      <span slot-scope="{data}">
          <i :class="data.icon"></i>
          {{data.text}}
          <el-switch v-model="data.status" @change="setStatus(data)" :active-value="1" :inactive-value="0" :width="30">
          </el-switch>
          
          <el-dropdown @command="select">
            <el-button size="mini" round>操作</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type:'add',id:data.id}">
                添加下级菜单
              </el-dropdown-item>
              <el-dropdown-item v-if="data.children.length==0" :command="{type:'delete',id:data.id}">
                删除
              </el-dropdown-item>
              <el-dropdown-item :command="{type:'edit',id:data.id,row:data}">
                编辑
              </el-dropdown-item>
            </el-dropdown-menu>
            <el-button type="primary" size="mini" circle icon="el-icon-arrow-up" @click="sort(data.id,'up',data.sort)"></el-button>
            <el-button type="primary" size="mini" circle icon="el-icon-arrow-down" @click="sort(data.id,'down',data.sort)"></el-button>
          </el-dropdown>
        </span>
    </el-tree>
  </el-card>

  <el-dialog width="400px" :title="dialogTitle" :visible.sync="dialogVisible" @close="dialogClose">
    <el-form label-position="left" :model="formData" ref="formData" :rules="rules" label-width="60px">
      <el-form-item label="名称" prop="text">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
      <el-form-item label="URL" prop="url">
        <el-input v-model="formData.url"></el-input>
      </el-form-item>
      <el-form-item label="ICON" prop="icon">
        <el-select v-model="formData.icon">
          <el-option label="无" value=""></el-option>
          <el-option v-for=" icon in icons" :key="'icon'+icon" :value="icon">
            <i :class="icon"></i>
            <span>{{icon}}</span>
          </el-option>
        </el-select>
        <i :class="formData.icon"></i>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button type="text" @click="dialogVisible=false">取 消</el-button>
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusAdd" v-show="btnStatus">确 定</el-button>
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusEdit" v-show="!btnStatus">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        text: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case value.trim() === "":
                  callback(new Error("不能为空"));
                  break;
                case !/^.{2,18}$/.test(value):
                  callback(new Error("菜单名称长度为2-18个字符"));
                  break;
                default:
                  callback();
              }
            }
          }
        ],
        url: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case value.trim() === "":
                  callback(new Error("不能为空"));
                  break;

                case !/^(\/\w+)+$/.test(value):
                  callback(new Error("url格式非法!"));
                  break;
                default:
                  callback();
              }
            }
          }
        ]
      },
      status:"1",
      btnStatus: true,
      treeLoading: false,
      buttonOkIcon: "",
      buttonDisabled: false,
      dialogTitle: "",
      dialogVisible: false,
      menusList: [],
      formData: {
        text: "",
        icon: "",
        url: "",
        pid: 0
      },
      icons: [
        "el-icon-info",
        "el-icon-error",
        "el-icon-success",
        "el-icon-warning",
        "el-icon-question",
        "el-icon-back",
        "el-icon-arrow-left",
        "el-icon-arrow-down",
        "el-icon-arrow-right",
        "el-icon-arrow-up",
        "el-icon-caret-left",
        "el-icon-caret-bottom",
        "el-icon-caret-top",
        "el-icon-caret-right",
        "el-icon-d-arrow-left",
        "el-icon-d-arrow-right",
        "el-icon-minus",
        "el-icon-plus",
        "el-icon-remove",
        "el-icon-circle-plus",
        "el-icon-remove-outline",
        "el-icon-circle-plus-outline",
        "el-icon-close",
        "el-icon-check",
        "el-icon-circle-close",
        "el-icon-circle-check",
        "el-icon-circle-close-outline",
        "el-icon-circle-check-outline",
        "el-icon-zoom-out",
        "el-icon-zoom-in",
        "el-icon-d-caret",
        "el-icon-sort",
        "el-icon-sort-down",
        "el-icon-sort-up",
        "el-icon-tickets",
        "el-icon-document",
        "el-icon-goods",
        "el-icon-sold-out",
        "el-icon-news",
        "el-icon-message",
        "el-icon-date",
        "el-icon-printer",
        "el-icon-time",
        "el-icon-bell",
        "el-icon-mobile-phone",
        "el-icon-service",
        "el-icon-view",
        "el-icon-menu",
        "el-icon-more",
        "el-icon-more-outline",
        "el-icon-star-on",
        "el-icon-star-off",
        "el-icon-location",
        "el-icon-location-outline",
        "el-icon-phone",
        "el-icon-phone-outline",
        "el-icon-picture",
        "el-icon-picture-outline",
        "el-icon-delete",
        "el-icon-search",
        "el-icon-edit",
        "el-icon-edit-outline",
        "el-icon-rank",
        "el-icon-refresh",
        "el-icon-share",
        "el-icon-setting",
        "el-icon-upload",
        "el-icon-upload2",
        "el-icon-download",
        "el-icon-loading"
      ]
    };
  },
  created() {
    this.getMenusList();
  },
  methods: {
    setStatus(data){
      this.$http.get("/menus/status",{
        params:{
          id:data.id,
          status:data.status
        }
      }).then(()=>{
        this.$root.$emit("loadingHTML");
        console.log(data.status)
      })
    },
    sort(id, dir, sort) {
      this.$http
        .post("/menus/sort", this.$qs.stringify({ id, dir, sort }))
        .then(() => {
          this.getMenusList();
        })
        .catch(() => {
          console.log("移动失败")
        });
    },
    getMenusList() {
      this.treeLoading = true;
      this.$http.get("/menus/list").then(result => {
        this.treeLoading = false;
        if (result.data.error > 0 && result.data.error == 4) {
          this.$router.push("/login");
          return;
        }
        this.menusList = this.$tree(result.data.data);
      });
      this.$root.$emit('loadingHTML')
    },
    dialogClose() {
      this.$refs.formData.resetFields();
      this.formData.pid = 0;
    },
    menusAdd() {
      this.$refs.formData.validate(pass => {
        if (!pass) return;
        this.buttonOkIcon = "el-icon-loading";
        this.buttonDisabled = true;

        this.$http
          .post("/menus/add", this.$qs.stringify(this.formData))
          .then(result => {
            this.buttonOkIcon = "";
            this.buttonDisabled = false;
            this.getMenusList();
            this.dialogVisible = false;
          });
      });
    },
    menusEdit() {
      this.$http
        .post("/menus/edit", this.$qs.stringify(this.formData))
        .then(result => {
          this.dialogVisible = false;
          this.getMenusList();
        });
    },
    delete(id) {
      this.$http.get(`/menus/delete?id=${id}`).then(result => {
        this.getMenusList();
      });
    },
    select(obj) {
      switch (obj.type) {
        case "add":
          this.btnStatus = true;
          this.formData.pid = obj.id;
          this.dialogVisible = true;
          this.dialogTitle = "添加下级菜单";
          break;
        case "edit":
          this.btnStatus = false;
          this.dialogVisible = true;
          this.dialogTitle = "编辑";
          this.formData.text = obj.row.text;
          this.formData.icon = obj.row.icon;
          this.formData.url = obj.row.url;
          this.$set(this.formData, "id", obj.id);
          break;
        case "delete":
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.delete(obj.id);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
          break;
      }
    }
  }
};
</script>

<style>
.el-tree-node__content {
  height: 40px;
}
</style>
